<template>
	<view class="examScoreDetail">
		<view class="searchBar">
			<view class="toIndexIcon" @click="toExam()">
				<image class="icon-fanhui" src="../../static/fonts/back-white.png"></image>
			</view>
			<view class="navTitle">成绩报告</view>
		</view>
		<view class="bg"></view>
		<view class="containt">
			<view class="score">
				<view class="scoreText">我的成绩</view>
				<view class="scoreNum">{{scoreInfo.totalScore}}</view>
			</view>
			<view class="detail">
				<view>本次答题统计：<span><span class="wigth">{{scoreInfo.rightQuesNum}}</span>/{{scoreInfo.allQuesNum}}</span></view>
				<view>错题数：<span>{{scoreInfo.errorQuesNum}}</span></view>
				<view>用时：<span>{{formateTime()}}</span></view>
				<view>正确率：<span>{{scoreInfo.rightRate}}</span></view>
				<view>剩余答题次数：<span class="wigth">{{scoreInfo.leftExamNum}}</span></view>
			</view>
			<view class="btn">
				<button @click="toExam()">返回</button>
				<button @click="nextBegin()">再考一次</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scoreInfo: null
			}
		},
		onLoad(option) {
			this.scoreInfo = JSON.parse(option.scoreInfo)
		},
		methods: {
			toExam(){
				uni.switchTab({
				    url: '../exam/exam'
				});
			},
			nextBegin(){
				uni.navigateTo({
				    url: '/pages/exam-rule-intro/exam-rule-intro'
				});
			},
			// 秒转换为时分秒
			formateTime() {
				if(this.scoreInfo!==null){
					let h = parseInt(this.scoreInfo.spendTime / 3600)
					let minute = parseInt(this.scoreInfo.spendTime / 60 % 60)
					let second = Math.ceil(this.scoreInfo.spendTime % 60)  
					const formatSecond = second > 59 ? 59 : second
					return `${h < 10 ? '0' + h : h}:${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.examScoreDetail{
		.searchBar{
			width: 100%;
			padding-top: 45rpx;
			background-color: #FF4848;
			color: #fff;
			border-bottom: 4rpx solid #FF4848;
			.toIndexIcon{
				display: inline-block;
				width: 100rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				.icon-fanhui{
					// font-size: 45rpx;
					width: 40rpx;
					height: 40rpx;
					position: relative;
					top: 8rpx;
				}
			}
			.navTitle{
				display: inline-block;
				width: 70%;
				text-align: center;
				font-weight: 700;
			}
		}
		.bg{
			width: 750rpx;
			height: 360rpx;
			background-color: #FF4848;
		}
		.containt{
			width: 680rpx;
			height: 1000rpx;
			border-radius: 20rpx;
			background-color: #fff;
			box-shadow: 3rpx 3rpx 20rpx rgb(214, 214, 214);
			position: absolute;
			top: 140rpx;
			left: 35rpx;
			.score{
				text-align: center;
				.scoreText{
					margin-top: 20rpx;
					color: #888;
				}
				.scoreNum{
					width: 200rpx;
					height: 200rpx;
					line-height: 200rpx;
					border: 6rpx solid #FF4848;
					border-radius: 50%;
					color: rgb(52, 52, 52);
					font-size: 80rpx;
					font-weight: 500;
					position: relative;
					top: 10rpx;
					left: 230rpx;
				}
			}
		}
		.detail{
			padding: 100rpx 20rpx ;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-around;
			view{
				width: 50%;
				padding-bottom: 40rpx;
				// padding-left: 20rpx;
				box-sizing: border-box;
				color: #888;
				span{
					color: #000;
				}
				.wigth{
					color: red;
				}
			}
			view:nth-child(2),
			view:nth-child(4){
				padding-left: 60rpx;
			}
		}
		.btn{
			position: relative;
			top: 140rpx;
			button{
				display: inline-block;
				background-color: rgb(253, 187, 83);
				color: #000;
				width: 280rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: 30rpx;
			}
			button:nth-child(1){
				margin-right: 20rpx;
				margin-left: 40rpx;
			}
			button:nth-child(2){
				margin-right: 40rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>
